<template>
  <div id="orderPayCheck">
    <div class="list-box">
      <!-- 进度条 -->
      <el-steps :active="active">
        <el-step title="我的购物车"></el-step>
        <el-step title="确认订单信息"></el-step>
        <el-step title="订单提交成功"></el-step>
      </el-steps>
      <div class="cart-wrap">
        <div class="pay-wrap">
          <div class="pay-title">
            <i
              class="el-icon-warning"
              style="font-size: 32px;float: left;margin-right: 15px;color: orange;"
            ></i>还差最后一步，请尽快付款！
          </div>
          <div class="pay-money">
            应付金额：
            <span class="money">¥{{$route.query.sum}}</span>
          </div>
          <div class="pay-details">
            <div class="pay-details-info">
              <span class="name">商品名称：</span>
              {{$route.query.str}}
            </div>
          </div>
          <!-- <div class="pay-info">收货信息：{{name}}, {{province}}省{{city}}市{{area}}区{{local}}, {{tel}}</div> -->
          <div class="pay-type">
            <div class="name">支付方式：</div>
            <div class="item">
              <el-radio v-model="radio" label="1">
                <img src="//static.xidibuy.com/static/global/images/1.0.0/order/pay-alipay.png" alt />
              </el-radio>
            </div>
            <div class="item">
              <el-radio v-model="radio" label="2">
                <img
                  src="//static.xidibuy.com/static/global/images/1.0.0/order/pay-weixinqr.png"
                  alt
                />
              </el-radio>
            </div>
          </div>
          <div class="pay-jump">
            <el-button type="primary" style="width: 100%;height: 100%;" @click="zhifu">立即支付</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 3,
      radio: "1"
    };
  },
  methods:{
    zhifu(){
      if(this.radio==2){
        this.$message.error("暂不支持微信支付！")
        return;
      }
      this.axios.post("/order/pay",{
        "sum":this.$route.query.sum,
        "alipay":this.$route.query.alipay,
        "str":this.$route.query.str,
      }).then(resp=>{
        if(resp.code == 0){
          var win = window.open("","_blank")
          win.document.write(resp.data)
        }else{
          this.$message.error(resp.msg)
        }
      })
    }
  }
};
</script>

<style scoped>
#orderPayCheck .list-box {
  margin: 0 auto;
  width: 1080px;
}

/* 进度条 */
.el-steps--horizontal {
  padding: 2% 5% 0;
}

/* 内容 */
.cart-wrap {
  width: 996px;
  margin: 0 auto;
}
.pay-wrap {
  min-height: 400px;
  position: relative;
}

.pay-title {
  height: 32px;
  margin-top: 30px;
  font-size: 20px;
  line-height: 32px;
}

.pay-money {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  margin-top: 5px;
  height: 24px;
  font-size: 13px;
  line-height: 24px;
}
.pay-money .money {
  position: relative;
  top: 1px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #29a3d6;
}

.pay-details {
  text-align: right;
}
.pay-details .pay-details-info {
  text-align: left;
  padding-top: 19px;
  padding-bottom: 26px;
  margin-bottom: 20px;
  border-bottom: 1px dotted #ddd;
  font-size: 13px;
  line-height: 20px;
  display: block;
}
.pay-details .pay-details-info .name {
  color: #777;
}

.pay-info {
  /* padding-top: 25px;
  border-top: 1px dotted #ddd; */
  margin-top: 20px;
  font-size: 13px;
  line-height: 24px;
}

.pay-type {
  overflow: hidden;
  height: 42px;
  margin-top: 20px;
  font-size: 13px;
  line-height: 42px;
}

.pay-type .name {
  float: left;
  margin-right: 25px;
}
.pay-type .item {
  float: left;
  margin-right: 70px;
  cursor: pointer;
}
.pay-type .item img {
  display: inline-block;
  vertical-align: middle;
}

.pay-jump {
  width: 300px;
  height: 48px;
  margin-top: 40px;
  font-size: 16px;
  line-height: 46px;
  text-align: center;
}
</style>